<template>
  <view class="detailed" >
    <view class="top">
        <view class="tit">{{ title }}</view>
        <view class="val">
          <text class="val-num" :class="{'add': detailed.type === 1, 'minus': detailed.type === 2}">
            <text >{{ detailed.type === 1 ? '+' : '-' }}</text>
            <text v-if="props.type === 'bonus'">￥</text>
            <text style="padding: 0 2rpx;">{{detailed.amount}}</text>
            <text v-if="props.type === 'point'">积分</text>
          </text>
        </view>
    </view>
    <view class="infos">
        <view>{{ desc }} </view>
        <view> {{detailed.createTime	}} </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
const props = defineProps({
  detailed: {
    type: Object,
    default: () => {}
  },
  type: {
    type: String,
    default: 'bonus'
  }
})
const detailed = computed(()=> {
  return props.detailed || {}
})
const title = computed(()=> {
  const { type  } = props.detailed
  if(type) {
    if(props.type === 'bonus') {
      if(type === 1) {
        return `订单奖励`
      }
      return `提现申请`
    } else {
      if(type === 1) {
        return `积分订单`
      }
      return `兑换商品`
    }

  }
  return ''
})
const desc = computed(()=> {
  const { type , orderBaseId, relatedId } = props.detailed
  if(type) {

    if(props.type === 'bonus') {
      if(type === 1) {
        return `通过 ${relatedId}  订单获得`
      }
      return `在提现奖金池申请提现`
    } else {
      if(type === 1) {
        return `通过 ${orderBaseId} 订单`
      }
      return `在积分商城兑换 ***** 物品`
    }

  }
  return ''
})
 
</script>

<style lang="scss" scoped>
.detailed{
    .top{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16rpx;
        .tit{
            font-weight: 400;
            font-size: 28rpx;
            color: #333333;
            line-height: 36rpx;
        }
        .val{
            font-weight: 400;
            font-size: 28rpx;
            color: #333;
            line-height: 36rpx;
            .val-num{
              &.add{
                color: #FA5151
              }
              &.minus{
                color: #00B578
              }
            }
        }
    }
    .infos{
        display: flex;
        justify-content: space-between;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 30rpx;
    }
}
</style>
